<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.4.0">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/all.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.1.1/animate.min.css">

<script class="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"iyue.top","root":"/","images":"/images","scheme":"Muse","version":"8.3.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":false,"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"}};
  </script>
<meta name="description" content="我是萌新">
<meta property="og:type" content="website">
<meta property="og:title" content="山外小楼">
<meta property="og:url" content="http://iyue.top/index.html">
<meta property="og:site_name" content="山外小楼">
<meta property="og:description" content="我是萌新">
<meta property="og:locale" content="zh_CN">
<meta property="article:author" content="萌新">
<meta name="twitter:card" content="summary">


<link rel="canonical" href="http://iyue.top/">


<script class="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : true,
    isPost : false,
    lang   : 'zh-CN'
  };
</script>
<title>山外小楼</title>
  




  <noscript>
  <style>
  body { margin-top: 2rem; }

  .use-motion .menu-item,
  .use-motion .sidebar,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header {
    visibility: visible;
  }

  .use-motion .header,
  .use-motion .site-brand-container .toggle,
  .use-motion .footer { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle,
  .use-motion .custom-logo-image {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line {
    transform: scaleX(1);
  }

  .search-pop-overlay, .sidebar-nav { display: none; }
  .sidebar-panel { display: block; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏" role="button">
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <h1 class="site-title">山外小楼</h1>
      <i class="logo-line"></i>
    </a>
      <p class="site-subtitle" itemprop="description">前端攻略</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>







</div>
        
  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">

    <div class="sidebar-inner sidebar-overview-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">萌新</p>
  <div class="site-description" itemprop="description">我是萌新</div>
</div>
<div class="site-state-wrap site-overview-item animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives">
          <span class="site-state-item-count">21</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
        <span class="site-state-item-count">1</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
        <span class="site-state-item-count">15</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>



        </div>
      </div>
    </div>
  </aside>
  <div class="sidebar-dimmer"></div>


    </header>

    
  <div class="back-to-top" role="button" aria-label="返回顶部">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


    <div class="main-inner index posts-expand">

    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://iyue.top/2019/12/16/JS%E7%9A%84%E5%B1%9E%E6%80%A7%E6%8F%8F%E8%BF%B0%E7%AC%A6/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="萌新">
      <meta itemprop="description" content="我是萌新">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="山外小楼">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2019/12/16/JS%E7%9A%84%E5%B1%9E%E6%80%A7%E6%8F%8F%E8%BF%B0%E7%AC%A6/" class="post-title-link" itemprop="url">JS的属性描述符</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2019-12-16 15:21:16" itemprop="dateCreated datePublished" datetime="2019-12-16T15:21:16+08:00">2019-12-16</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2021-04-27 16:41:57" itemprop="dateModified" datetime="2021-04-27T16:41:57+08:00">2021-04-27</time>
      </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <p>默认创建对象时属性为数据属性</p>
<h2 id="数据属性"><a href="#数据属性" class="headerlink" title="数据属性"></a>数据属性</h2><p>字面量创建属性时默认为</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  value: <span class="literal">undefined</span>,</span><br><span class="line">  writable: <span class="literal">true</span>,</span><br><span class="line">  enumerable: <span class="literal">true</span>,</span><br><span class="line">  configurable: <span class="literal">true</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>Object.defineProperty方法创建属性时默认为</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  value: <span class="literal">undefined</span>,</span><br><span class="line">  writable: <span class="literal">false</span>,</span><br><span class="line">  enumerable: <span class="literal">false</span>,</span><br><span class="line">  configurable: <span class="literal">false</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>可以使用<code>Object.getOwnPropertyDescriptor</code>或<code>Object.getOwnPropertyDescriptors</code>方法来获取对象属性的描述符信息；</p>
<ol>
<li><code>configurable</code>为<code>false</code>,<code>writable</code>为<code>true</code>时，可通过<code>赋值</code>的方式或者<code>Object.defineProperty</code>的方式修改value值；</li>
<li><code>configurable</code>为<code>false</code>,<code>writable</code>为<code>false</code>时，只能通过<code>Object.defineProperty</code>的方式修改value值；</li>
<li><code>configurable</code>为<code>false</code>,<code>writable</code>为<code>true</code>时，可将wirtable设置为false；</li>
<li><code>configurable</code>为<code>false</code>,<code>writable</code>为<code>false</code>时，<code>无法修改</code>wirtable的值；</li>
<li><code>configurable</code>为<code>false</code>后，也<code>无法修改</code>为true；</li>
</ol>
<h2 id="访问器属性"><a href="#访问器属性" class="headerlink" title="访问器属性"></a>访问器属性</h2><p>字面量创建访问器属性为</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj=&#123;</span><br><span class="line">  <span class="keyword">get</span> <span class="title">a</span>() &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="number">1</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>Object.defineProperty方法创建访问器属性</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj=&#123;&#125;</span><br><span class="line"><span class="built_in">Object</span>.defineProperty(obj, <span class="string">&#x27;a&#x27;</span> ,&#123;</span><br><span class="line">  <span class="function"><span class="title">get</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="number">1</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>默认值为</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  get: <span class="literal">undefined</span>,</span><br><span class="line">  set: <span class="literal">undefined</span>,</span><br><span class="line">  enumerable: <span class="literal">true</span>,</span><br><span class="line">  configurable: <span class="literal">true</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="方法"><a href="#方法" class="headerlink" title="方法"></a>方法</h2><ol>
<li><p>为目标对象设置单个属性<br>设置单个属性可以使用<code>Object.defineProperty()</code>方法，要注意的是，对于同一个属性，不可以同时在描述符中指定属于数据描述符的value，writable和属于访问器描述符的get，set，否则会报错。</p>
</li>
<li><p>为目标对象设置多个属性<br>设置多个属性可以使用<code>Object.defineProperties()</code>方法。</p>
</li>
<li><p>禁止目标对象扩展（不允许添加新属性<br>禁止添加新属性可以使用<code>Object.preventExtensions()</code>方法，该方法接收一个目标对象传入，使用后该对象禁止添加新属性。使该对象禁止扩展。</p>
</li>
<li><p>密封目标对象（不允许扩展且不允许进行属性配置）<br>我们可以使用<code>Object.seal()</code> 方法创建一个“密封”的对象，这个方法实际上会在一个现有对象上调用 Object.preventExtensions()方法 并把所有现有属性标记为configurable:false。密封之后不仅不能添加新属性，也不能重新配置或者删除任何现有属性(但是可以修改属性的值)</p>
</li>
<li><p>冻结目标对象（密封对象且不允许修改）<br><code>Object.freeze(..)</code> 会创建一个冻结对象，这个方法实际上会在一个现有对象上调用 <code>Object.seal(..)</code> 并把所有“数据访问”属性标记为 writable:false，这样就无法修改它们的值。</p>
</li>
</ol>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://iyue.top/2019/07/26/%E9%A1%B5%E9%9D%A2%E6%BB%9A%E5%8A%A8%E6%9D%A1%E7%9A%84%E7%9B%B8%E5%85%B3%E5%B1%9E%E6%80%A7%E6%A6%82%E5%BF%B5/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="萌新">
      <meta itemprop="description" content="我是萌新">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="山外小楼">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2019/07/26/%E9%A1%B5%E9%9D%A2%E6%BB%9A%E5%8A%A8%E6%9D%A1%E7%9A%84%E7%9B%B8%E5%85%B3%E5%B1%9E%E6%80%A7%E6%A6%82%E5%BF%B5/" class="post-title-link" itemprop="url">页面滚动条的相关属性概念</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2019-07-26 16:24:58" itemprop="dateCreated datePublished" datetime="2019-07-26T16:24:58+08:00">2019-07-26</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2021-04-27 16:41:57" itemprop="dateModified" datetime="2021-04-27T16:41:57+08:00">2021-04-27</time>
      </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h2 id="图例"><a href="#图例" class="headerlink" title="图例"></a>图例</h2><figure class="image-bubble">
                <div class="img-lightbox">
                    <div class="overlay"></div>
                    <img src="/img/scroll.jpg" alt="flex示例" title="">
                </div>
                <div class="image-caption">flex示例</div>
            </figure>

<h2 id="说明"><a href="#说明" class="headerlink" title="说明"></a>说明</h2><p><strong>本身的宽高,不包括border</strong></p>
<ul>
<li>clientWidth</li>
<li>clientHeight</li>
</ul>
<p><strong>本身的宽高,包括border</strong></p>
<ul>
<li>offsetWidth</li>
<li>offsetHeight</li>
</ul>
<p><strong>距离左侧和上部的距离,相对于窗口</strong></p>
<ul>
<li>offsetLeft</li>
<li>offsetTop</li>
</ul>
<p><strong>获取可以滚动的宽度(不包括border)如果内容宽高比本身小,该值为本身宽高,否则就是内容的宽高</strong></p>
<ul>
<li>scrollWidth</li>
<li>scrollHeight</li>
</ul>
<p><strong>滚动出去的距离</strong></p>
<ul>
<li>scrollLeft</li>
<li>scrollTop</li>
</ul>
<p><strong>相对于窗口左上角的点</strong></p>
<ul>
<li>clientX</li>
<li>clientY</li>
</ul>
<p><strong>相对于屏幕左上角的点(建议移动端使用)</strong></p>
<ul>
<li>screenX</li>
<li>screenY</li>
</ul>
<p><strong>相对于本身左上角的点(非标准属性)</strong></p>
<ul>
<li>offsetX</li>
<li>offsetY</li>
</ul>
<p><strong>相对于整个文档左上角的点(建议移动端使用)</strong></p>
<ul>
<li>pageX</li>
<li>pageY</li>
</ul>
<p><strong>获取窗口的宽高</strong></p>
<ul>
<li>document.body.clientWidth</li>
<li>document.body.clientHeight</li>
<li>document.body.offsetWidth (border)</li>
<li>docuemnt.body.offsetHeight (border)</li>
</ul>
<p><strong>获取正文的宽高(可以滚动的宽高)</strong></p>
<ul>
<li>document.body.scrollWidth</li>
<li>docuemnt.body.scrollHeight</li>
</ul>
<p><strong>获取正文滚出去的宽高</strong></p>
<ul>
<li>document.body.scrollTop</li>
<li>document.body.scrollLeft</li>
</ul>
<p><strong>获取屏幕分辨率宽高</strong></p>
<ul>
<li>window.screen.width</li>
<li>window.screen.height</li>
</ul>
<p><strong>获取左边框宽度和上边框宽度</strong></p>
<ul>
<li>clientLeft</li>
<li>clientTop</li>
</ul>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://iyue.top/2019/05/22/js%E4%B8%AD%E5%87%BD%E6%95%B0%E7%9A%84%E9%98%B2%E6%8A%96-debounce-%E4%B8%8E%E8%8A%82%E6%B5%81-throttle/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="萌新">
      <meta itemprop="description" content="我是萌新">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="山外小楼">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2019/05/22/js%E4%B8%AD%E5%87%BD%E6%95%B0%E7%9A%84%E9%98%B2%E6%8A%96-debounce-%E4%B8%8E%E8%8A%82%E6%B5%81-throttle/" class="post-title-link" itemprop="url">js中函数的防抖(debounce)与节流(throttle)</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2019-05-22 20:37:27" itemprop="dateCreated datePublished" datetime="2019-05-22T20:37:27+08:00">2019-05-22</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2021-04-27 16:41:57" itemprop="dateModified" datetime="2021-04-27T16:41:57+08:00">2021-04-27</time>
      </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h2 id="问题"><a href="#问题" class="headerlink" title="问题"></a>问题</h2><p>在绑定 scroll 、resize 这类事件时，当它发生时，它被触发的频次非常高，间隔很近。如果事件中涉及到大量的位置计算、DOM 操作、元素重绘等工作且这些工作无法在下一个 scroll 事件触发前完成，就会造成浏览器掉帧。加之用户鼠标滚动往往是连续的，就会持续触发 scroll 事件导致掉帧扩大、浏览器 CPU 使用率增加、用户体验受到影响。尤其是在涉及与后端的交互中，前端依赖于某种事件如 resize，scroll，发送 Http 请求，在这个过程中，如果不做防抖处理，那么在事件触发的一瞬间，会有很多个请求发过去，增加了服务端的压力。</p>
<h2 id="函数防抖（debounce）"><a href="#函数防抖（debounce）" class="headerlink" title="函数防抖（debounce）"></a>函数防抖（debounce）</h2><p>当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。定义如下：</p>
<blockquote>
<p>对于短时间内连续触发的事件（上面的滚动事件），防抖的含义就是让某个时间期限（如 1000 毫秒）内，事件处理函数只执行一次。</p>
</blockquote>
<p>例如：在第一次触发事件时，不立即执行函数，而是给出一个期限值比如 200ms，然后：</p>
<ul>
<li>如果在 200ms 内没有再次触发滚动事件，那么就执行函数</li>
<li>如果在 200ms 内再次触发滚动事件，那么当前的计时取消，重新开始计时</li>
</ul>
<p><strong>效果</strong>：如果短时间内大量触发同一事件，只会执行一次函数。</p>
<p><strong>实现</strong>：既然前面都提到了计时，那实现的关键就在于 setTimeOut 这个函数，由于还需要一个变量来保存计时，考虑维护全局纯净，可以借助闭包来实现：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">debounce</span>(<span class="params">fn, delay</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> timer = <span class="literal">null</span>; <span class="comment">//借助闭包</span></span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (timer) &#123;</span><br><span class="line">      <span class="built_in">clearTimeout</span>(timer);</span><br><span class="line">    &#125;</span><br><span class="line">    timer = <span class="built_in">setTimeout</span>(fn, delay); <span class="comment">// 简化写法</span></span><br><span class="line">  &#125;;</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">showTop</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> scrollTop = <span class="built_in">document</span>.body.scrollTop || <span class="built_in">document</span>.documentElement.scrollTop;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;滚动条位置：&quot;</span> + scrollTop);</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">window</span>.onscroll = debounce(showTop, <span class="number">1000</span>); <span class="comment">// 为了方便观察效果我们取个大点的间断值，实际使用根据需要来配置</span></span><br></pre></td></tr></table></figure>

<h2 id="函数节流（throttle）"><a href="#函数节流（throttle）" class="headerlink" title="函数节流（throttle）"></a>函数节流（throttle）</h2><p>另一种场景，比如在做图片懒加载的时候，我们是希望一段时间去触发一次，而不是只在最后触发一次。这样我们可以设计一种类似控制阀门一样定期开放的函数，也就是让函数执行一次后，在某个时间段内暂时失效，过了这段时间后再重新激活（类似于技能冷却时间）。</p>
<p><strong>效果</strong>：如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效。</p>
<p><strong>实现</strong>：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 时间戳方案</span></span><br><span class="line"><span class="keyword">var</span> throttle = <span class="function"><span class="keyword">function</span>(<span class="params">func, delay</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> prev = <span class="built_in">Date</span>.now();</span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> context = <span class="built_in">this</span>;</span><br><span class="line">    <span class="keyword">var</span> args = <span class="built_in">arguments</span>;</span><br><span class="line">    <span class="keyword">var</span> now = <span class="built_in">Date</span>.now();</span><br><span class="line">    <span class="keyword">if</span> (now - prev &gt;= delay) &#123;</span><br><span class="line">      func.apply(context, args);</span><br><span class="line">      prev = <span class="built_in">Date</span>.now();</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">handle</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="built_in">Math</span>.random());</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">window</span>.addEventListener(<span class="string">&quot;scroll&quot;</span>, throttle(handle, <span class="number">1000</span>));</span><br><span class="line"></span><br><span class="line"><span class="comment">// 定时器方案</span></span><br><span class="line"><span class="keyword">var</span> throttle = <span class="function"><span class="keyword">function</span>(<span class="params">func, delay</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> timer = <span class="literal">null</span>;</span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> context = <span class="built_in">this</span>;</span><br><span class="line">    <span class="keyword">var</span> args = <span class="built_in">arguments</span>;</span><br><span class="line">    <span class="keyword">if</span> (!timer) &#123;</span><br><span class="line">      timer = <span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        func.apply(context, args);</span><br><span class="line">        timer = <span class="literal">null</span>;</span><br><span class="line">      &#125;, delay);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">handle</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="built_in">Math</span>.random());</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">window</span>.addEventListener(<span class="string">&quot;scroll&quot;</span>, throttle(handle, <span class="number">1000</span>));</span><br></pre></td></tr></table></figure>

<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p><strong>函数防抖</strong>：将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。</p>
<p><strong>函数节流</strong>：使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。</p>
<p><strong>区别</strong>： 函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。</p>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://iyue.top/2019/04/18/vue%E8%84%9A%E6%89%8B%E6%9E%B6-vue-cli-%E7%94%B12%E5%8D%87%E7%BA%A7%E5%88%B03%E6%97%B6%E9%81%87%E5%88%B0%E7%9A%84%E9%97%AE%E9%A2%98%E6%B1%87%E6%80%BB/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="萌新">
      <meta itemprop="description" content="我是萌新">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="山外小楼">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2019/04/18/vue%E8%84%9A%E6%89%8B%E6%9E%B6-vue-cli-%E7%94%B12%E5%8D%87%E7%BA%A7%E5%88%B03%E6%97%B6%E9%81%87%E5%88%B0%E7%9A%84%E9%97%AE%E9%A2%98%E6%B1%87%E6%80%BB/" class="post-title-link" itemprop="url">vue脚手架(vue-cli)由2升级到3时遇到的问题汇总</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2019-04-18 19:50:24" itemprop="dateCreated datePublished" datetime="2019-04-18T19:50:24+08:00">2019-04-18</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2021-04-27 16:41:57" itemprop="dateModified" datetime="2021-04-27T16:41:57+08:00">2021-04-27</time>
      </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h2 id="问题"><a href="#问题" class="headerlink" title="问题"></a>问题</h2><p>近期将项目的 vue 脚手架由 2 升级到了 3，在此过程中遇到的一些问题记录如下</p>
<h2 id="案例"><a href="#案例" class="headerlink" title="案例"></a>案例</h2><ol>
<li>vue 挂载方式改变</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//原方式</span></span><br><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">  el: <span class="string">&#x27;#app&#x27;</span>,</span><br><span class="line">  router,</span><br><span class="line">  template: <span class="string">&#x27;&lt;App/&gt;&#x27;</span>,</span><br><span class="line">  components: &#123; App &#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">// 现改为</span></span><br><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">  router,</span><br><span class="line">  render: <span class="function"><span class="params">h</span> =&gt;</span> h(App)</span><br><span class="line">&#125;).$mount(<span class="string">&#x27;#app&#x27;</span>)</span><br></pre></td></tr></table></figure>

<ol start="2">
<li>HTML 标签之间的间隙默认被删除，表现为原来在页面上内联元素之间因换行产生的空隙没有了</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 由于原项目并没有处理空隙，而且利用了空隙，为保持表现一致，可添加如下配置</span></span><br><span class="line">chainWebpack: <span class="function"><span class="params">config</span> =&gt;</span> &#123;</span><br><span class="line">  config.module</span><br><span class="line">    .rule(<span class="string">&#x27;vue&#x27;</span>)</span><br><span class="line">    .use(<span class="string">&#x27;vue-loader&#x27;</span>)</span><br><span class="line">    .loader(<span class="string">&#x27;vue-loader&#x27;</span>)</span><br><span class="line">    .tap(<span class="function"><span class="params">options</span> =&gt;</span> &#123;</span><br><span class="line">      options.compilerOptions.preserveWhitespace = <span class="literal">true</span></span><br><span class="line">      <span class="keyword">return</span> options</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>3. </p>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://iyue.top/2019/03/20/Chrome72%E5%B5%8C%E5%A5%97flex%E5%B8%83%E5%B1%80%E4%BF%AE%E6%94%B9%EF%BC%8C%E4%BD%A0%E7%9A%84%E7%BD%91%E7%AB%99%E5%8F%AF%E8%83%BD%E4%BC%9A%E5%8F%91%E7%94%9F%E5%B8%83%E5%B1%80%E9%94%99%E4%B9%B1/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="萌新">
      <meta itemprop="description" content="我是萌新">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="山外小楼">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2019/03/20/Chrome72%E5%B5%8C%E5%A5%97flex%E5%B8%83%E5%B1%80%E4%BF%AE%E6%94%B9%EF%BC%8C%E4%BD%A0%E7%9A%84%E7%BD%91%E7%AB%99%E5%8F%AF%E8%83%BD%E4%BC%9A%E5%8F%91%E7%94%9F%E5%B8%83%E5%B1%80%E9%94%99%E4%B9%B1/" class="post-title-link" itemprop="url">Chrome72嵌套flex布局修改，你的网站可能会发生布局错乱</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2019-03-20 20:17:50" itemprop="dateCreated datePublished" datetime="2019-03-20T20:17:50+08:00">2019-03-20</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2021-04-27 16:41:57" itemprop="dateModified" datetime="2021-04-27T16:41:57+08:00">2021-04-27</time>
      </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <blockquote>
<p>作者：蓝博<br>链接：<a target="_blank" rel="noopener" href="https://juejin.im/post/5c642f2ff265da2de660ecfc">https://juejin.im/post/5c642f2ff265da2de660ecfc</a><br>来源：掘金</p>
</blockquote>
<h2 id="起源"><a href="#起源" class="headerlink" title="起源"></a>起源</h2><p>2019年1月29日，Chrome72正式版（72.0.3626.81）发布，本次发布带来了一个改变，且没有在更新日志中提及，该改变导致某些网站发生了布局错乱。该改变主要针对的是嵌套的flex布局，下面我们一起看下是怎么回事。</p>
<h2 id="问题"><a href="#问题" class="headerlink" title="问题"></a>问题</h2><p>首先，我们有一个嵌套的flex布局，代码如下：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="css"><span class="selector-tag">div</span> &#123;</span></span><br><span class="line"><span class="css">    <span class="attribute">box-sizing</span>: border-box;</span></span><br><span class="line">&#125;</span><br><span class="line">.flex &#123;</span><br><span class="line"><span class="css">    <span class="attribute">display</span>: flex;</span></span><br><span class="line"><span class="css">    <span class="attribute">flex-direction</span>: column;</span></span><br><span class="line">&#125;</span><br><span class="line">.area &#123;</span><br><span class="line"><span class="css">    <span class="attribute">padding</span>: <span class="number">10px</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">height</span>: <span class="number">300px</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">width</span>: <span class="number">300px</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">background-color</span>: <span class="number">#3fb9ab</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">color</span>: <span class="number">#fff</span>;</span></span><br><span class="line">&#125;</span><br><span class="line">.item &#123;</span><br><span class="line"><span class="css">    <span class="attribute">padding</span>: <span class="number">10px</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">flex</span>: <span class="number">1</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">background-color</span>: <span class="number">#158c7e</span>;</span></span><br><span class="line">&#125;</span><br><span class="line">.nest-item &#123;</span><br><span class="line"><span class="css">    <span class="attribute">flex</span>: <span class="number">1</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">overflow</span>: auto;</span></span><br><span class="line"><span class="css">    <span class="attribute">background-color</span>: <span class="number">#046b5f</span>;</span></span><br><span class="line">&#125;</span><br><span class="line">.content &#123;</span><br><span class="line"><span class="css">    <span class="attribute">padding</span>: <span class="number">10px</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">height</span>: <span class="number">600px</span>;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;area flex&quot;</span>&gt;</span></span><br><span class="line">    area</span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;item flex&quot;</span>&gt;</span></span><br><span class="line">        item</span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;nest-item&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;content&quot;</span>&gt;</span>content<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>希望实现这样的效果：父容器area有一个指定的高度，且它是一个flex弹性盒子，它内部有一个子元素item，使用 <code>flex: 1</code> 指定了占满剩余空间，且item也是一个flex弹性盒子，它内部还有一个同样占满剩余空间的嵌套子元素nest-item，通过设置 <code>overflow: auto</code> 让它的内容超出后显示滚动条。效果如下：  </p>
<p><img src="/img/flex_001.jpg" alt="flex示例"></p>
<p>这样布局的想法很简单，即通过设置弹性盒子子元素的扩展比率，能得到一个自动占满剩余空间高度的容器，再在这个容器中放需要显示的内容，在某些情况下，这确实是一个比较不错的主意，在Chrome72之前都是可以正常显示的。但是Chrome72.0.3626.81中显示如下：  </p>
<p><img src="/img/flex_002.jpg" alt="flex示例"></p>
<h2 id="追溯"><a href="#追溯" class="headerlink" title="追溯"></a>追溯</h2><p>为什么会出现这样的问题呢？我们看一下<a target="_blank" rel="noopener" href="https://drafts.csswg.org/css-flexbox/#min-size-auto">规范</a>，flex弹性盒子主轴上子元素的最小大小是内容的大小（视主轴方向为宽或高）。  </p>
<p>那么我们再看一下上面的例子，area的主轴是纵向的，子元素item的最小高度即是内容的高度，而nest-item被content撑开，content有一个高度（600px，超出了容器的高度），那么item的最小高度也就超过了600px。这样一来，一层层都是被内容撑开，也就没有出现滚动条了，这样似乎是符合规范预期的。  </p>
<p>在chromium的issue反馈中，有人提到了<a target="_blank" rel="noopener" href="https://bugs.chromium.org/p/chromium/issues/detail?id=927066">这个问题</a>，根据回复，这正是官方为了让Chrome更加符合规范行为而做的调整。也就是说，Chrome72之前的版本，这算是一个没有按照规范行为而出现的bug。新的调整，其实就是让flex弹性盒子的子元素最小高度的默认行为应用 <code>min-height: min-content</code> ，就像官方回复中提到的那样，让子元素作为flex弹性盒子时却和普通盒子处理方式不同是会让人困惑的。  </p>
<h2 id="解决方法"><a href="#解决方法" class="headerlink" title="解决方法"></a>解决方法</h2><p>既然知道了原因，那么如果我们还想使用这样的布局方式，该怎么做呢？</p>
<p>对的，我们给item指定一个最小高度，让它不使用默认的行为（即内容的高度），一般我们指定最小高度为0 <code>min-height: 0</code>。给item加上这个样式后，我们再看一下效果：</p>
<figure class="image-bubble">
                <div class="img-lightbox">
                    <div class="overlay"></div>
                    <img src="/img/flex_003.jpg" alt="flex示例" title="">
                </div>
                <div class="image-caption">flex示例</div>
            </figure>

<p>嗯，已经符合我们的预期了。为了验证规范中提到的对主轴方向的行为，我们修改一下代码，将主轴设置为水平方向试试，代码如下：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="css"><span class="selector-tag">div</span> &#123;</span></span><br><span class="line"><span class="css">    <span class="attribute">box-sizing</span>: border-box;</span></span><br><span class="line">&#125;</span><br><span class="line">.flex &#123;</span><br><span class="line"><span class="css">    <span class="attribute">display</span>: flex;</span></span><br><span class="line"><span class="css">    <span class="attribute">flex-direction</span>: row;</span></span><br><span class="line">&#125;</span><br><span class="line">.area &#123;</span><br><span class="line"><span class="css">    <span class="attribute">padding</span>: <span class="number">10px</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">height</span>: <span class="number">300px</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">width</span>: <span class="number">300px</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">background-color</span>: <span class="number">#3fb9ab</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">color</span>: <span class="number">#fff</span>;</span></span><br><span class="line">&#125;</span><br><span class="line">.item &#123;</span><br><span class="line"><span class="css">    <span class="attribute">padding</span>: <span class="number">10px</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">flex</span>: <span class="number">1</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">background-color</span>: <span class="number">#158c7e</span>;</span></span><br><span class="line">&#125;</span><br><span class="line">.nest-item &#123;</span><br><span class="line"><span class="css">    <span class="attribute">flex</span>: <span class="number">1</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">overflow</span>: auto;</span></span><br><span class="line"><span class="css">    <span class="attribute">background-color</span>: <span class="number">#046b5f</span>;</span></span><br><span class="line">&#125;</span><br><span class="line">.content &#123;</span><br><span class="line"><span class="css">    <span class="attribute">padding</span>: <span class="number">10px</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">width</span>: <span class="number">600px</span>;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;area flex&quot;</span>&gt;</span></span><br><span class="line">    area</span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;item flex&quot;</span>&gt;</span></span><br><span class="line">        item</span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;nest-item&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;content&quot;</span>&gt;</span>content<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>效果如下：  </p>
<p><img src="/img/flex_004.jpg" alt="flex示例"></p>
<p>看来主轴为水平方向时，是符合规范预期行为的（Chrome72及以前的版本都符合），那么我们给item加上一句样式 <code>min-width: 0</code> ，效果如下：  </p>
<p><img src="/img/flex_005.jpg" alt="flex示例"></p>
<p>嗯，是符合我们预期的。  </p>
<h2 id="结语"><a href="#结语" class="headerlink" title="结语"></a>结语</h2><p>好了，现在你已经知道是怎么一回事了，可是等等，你说你升级到Chrome72没有发现我说的问题？  </p>
<p>那是因为官方注意到这个修改会影响到一些网站的正常显示，因此在2019年2月6日（正是春节假期间）发布的Chrome72.0.3626.96中，将<a target="_blank" rel="noopener" href="https://chromium.googlesource.com/chromium/src/+/032ef9666487db1d04b656a095b041de8c6d2b63">这个问题</a>还原回以前的行为了。  </p>
<p>官方的意思是为了避免这个修改给某些网站带来的不好的影响，因此预留时间给大家修改，等到Chrome73将会发布这一改变。所以为了未来更好的浏览体验，检查一下你的页面吧！</p>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://iyue.top/2019/02/01/async-await%E9%87%8C%E7%9A%84%E5%B9%B6%E8%A1%8C%E5%92%8C%E4%B8%B2%E8%A1%8C/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="萌新">
      <meta itemprop="description" content="我是萌新">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="山外小楼">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2019/02/01/async-await%E9%87%8C%E7%9A%84%E5%B9%B6%E8%A1%8C%E5%92%8C%E4%B8%B2%E8%A1%8C/" class="post-title-link" itemprop="url">async/await里的并行和串行</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2019-02-01 10:24:14" itemprop="dateCreated datePublished" datetime="2019-02-01T10:24:14+08:00">2019-02-01</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2021-04-27 16:41:57" itemprop="dateModified" datetime="2021-04-27T16:41:57+08:00">2021-04-27</time>
      </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <blockquote>
<p>文章出处：<a target="_blank" rel="noopener" href="https://www.cnblogs.com/JRliu/p/9004304.html">https://www.cnblogs.com/JRliu/p/9004304.html</a></p>
</blockquote>
<h2 id="问题"><a href="#问题" class="headerlink" title="问题"></a>问题</h2><p>我们在使用 async/await 语法时，有时会这样用：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getName</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>)=&gt;</span>&#123;</span><br><span class="line">        <span class="built_in">setTimeout</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">            resolve(<span class="string">&#x27;tony&#x27;</span>)</span><br><span class="line">        &#125;, <span class="number">2000</span>)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getId</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>)=&gt;</span>&#123;</span><br><span class="line">        <span class="built_in">setTimeout</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">            resolve(<span class="string">&#x27;123&#x27;</span>)</span><br><span class="line">        &#125;, <span class="number">3000</span>)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">;(<span class="keyword">async</span> ()=&gt;&#123;</span><br><span class="line">    <span class="keyword">let</span> name = <span class="keyword">await</span> getName()</span><br><span class="line">    <span class="keyword">let</span> id = <span class="keyword">await</span> getId()</span><br><span class="line">    alert(<span class="string">`name:<span class="subst">$&#123;name&#125;</span>, id:<span class="subst">$&#123;id&#125;</span>`</span>)</span><br><span class="line">&#125;)()</span><br></pre></td></tr></table></figure>

<p>一眼看上去，应该是3秒种多一点就会 alert 出 ‘name:tony, id:123’，实际上却花费了5秒才出现提示框，她们是串行执行的！而我们想要的是并行执行，因为她们之间并没有依赖关系。串行执行只会白白增加无谓的等待时间！怎么解决呢？  </p>
<h2 id="解决"><a href="#解决" class="headerlink" title="解决"></a>解决</h2><p>我们先看 Promise 的语法：  </p>
<blockquote>
<p>new Promise( function(resolve, reject) {…} /* executor */ );executor是带有 resolve 和 reject 两个参数的函数 。 Promise构造函数执行时立即 调用executor 函数 ， resolve 和 reject 两个函数作为参数传递给executor（executor 函数在Promise构造函数返回新建对象前被调用）。resolve 和 reject 函数被调用时，分别将promise的状态改为fulfilled（完成）或rejected（失败）。executor 内部通常会执行一些异步操作，一旦完成，可以调用resolve函数来将promise状态改成fulfilled，或者在发生错误时将它的状态改为rejected。</p>
</blockquote>
<p>传给 Promise 作为参数的函数会在 new 创建实例时立即调用上面的代码，可以分解成这样：  </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">;(<span class="keyword">async</span> ()=&gt;&#123;</span><br><span class="line">    <span class="keyword">let</span> namePromise = getName()</span><br><span class="line">    <span class="keyword">let</span> name = <span class="keyword">await</span> namePromise</span><br><span class="line">    <span class="keyword">let</span> idPromise = getId()              <span class="comment">//  2000ms之后才生成 Promise 实例</span></span><br><span class="line">    <span class="keyword">let</span> id = <span class="keyword">await</span> idPromise</span><br><span class="line">    alert(<span class="string">`name:<span class="subst">$&#123;name&#125;</span>, id:<span class="subst">$&#123;id&#125;</span>`</span>)</span><br><span class="line">&#125;)()</span><br></pre></td></tr></table></figure>

<p>所以，如果想并行执行，我们应该先生成所有需要使用的Promise实例：  </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">;(<span class="keyword">async</span> ()=&gt;&#123;</span><br><span class="line">    <span class="keyword">let</span> namePromise = getName()</span><br><span class="line">    <span class="keyword">let</span> idPromise = getId()              <span class="comment">// 先生成所有 promise 实例</span></span><br><span class="line">    <span class="keyword">let</span> name = <span class="keyword">await</span> namePromise</span><br><span class="line">    <span class="keyword">let</span> id = <span class="keyword">await</span> idPromise</span><br><span class="line">    alert(<span class="string">`name:<span class="subst">$&#123;name&#125;</span>, id:<span class="subst">$&#123;id&#125;</span>`</span>)</span><br><span class="line">&#125;)()</span><br></pre></td></tr></table></figure>

<p>或者使用Promise.all</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">;(<span class="keyword">async</span> ()=&gt;&#123;</span><br><span class="line">    <span class="keyword">var</span> result = <span class="keyword">await</span> <span class="built_in">Promise</span>.all([getName(), getId()])</span><br><span class="line">    alert(<span class="string">`name:<span class="subst">$&#123;result[<span class="number">0</span>]&#125;</span>, id:<span class="subst">$&#123;result[<span class="number">2</span>]&#125;</span>`</span>)</span><br><span class="line">&#125;)()</span><br></pre></td></tr></table></figure>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://iyue.top/2018/11/23/echarts%E5%9C%A8vue%E4%B8%AD%E8%8E%B7%E5%8F%96%E4%B8%8D%E5%88%B0%E9%AB%98%E5%BA%A6%E7%9A%84%E9%97%AE%E9%A2%98/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="萌新">
      <meta itemprop="description" content="我是萌新">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="山外小楼">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2018/11/23/echarts%E5%9C%A8vue%E4%B8%AD%E8%8E%B7%E5%8F%96%E4%B8%8D%E5%88%B0%E9%AB%98%E5%BA%A6%E7%9A%84%E9%97%AE%E9%A2%98/" class="post-title-link" itemprop="url">echarts在vue中获取不到高度的问题</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2018-11-23 18:21:45" itemprop="dateCreated datePublished" datetime="2018-11-23T18:21:45+08:00">2018-11-23</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2021-04-27 16:41:57" itemprop="dateModified" datetime="2021-04-27T16:41:57+08:00">2021-04-27</time>
      </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h2 id="问题引出"><a href="#问题引出" class="headerlink" title="问题引出"></a>问题引出</h2><p>在项目中，采用了element-ui框架及echarts；模板结构是一个tab切换页中，引入了自己做了简单封装的echarts；<br>在上一版还可以正常显示出图，而在后来对封装的echarts做了简单更新后，图表在tab切换页无法显示出来；</p>
<h2 id="问题排查"><a href="#问题排查" class="headerlink" title="问题排查"></a>问题排查</h2><p>通过查看element元素发生，图表元素canvas的宽度为0（高度是我自己指定的）；然后在echarts组件中通过api<code>echartsinstance.getWidth()</code>发现结果为0，说明在echarts实例化的时候，dom元素的宽度为0；</p>
<p>echarts的实例化是在vue的<code>mounted</code>阶段进行的，也就是说在这个阶段dom元素没有宽度；</p>
<p>这里还涉及到几个区别；</p>
<ol>
<li><p>图表组件更新之前是可以出图的，排查后发现，之前图表实例化是在数据发生变化的时候执行的，而数据是父组件在<code>mounted</code>阶段通过ajax请求获得数据传给echarts子组件的；那么父组件在<code>mounted</code>阶段，dom情况怎么样了呢  </p>
</li>
<li><p>改版后，图表实例化只执行一次，是在<code>mounted</code>阶段执行的；而tabs组件有可能在初次渲染时，默认tab页面都是属于隐藏的，从而在这个时候可能没有高度；</p>
</li>
</ol>
<p>以上是改版前后的区别及原因的猜想；其中主要涉及的几个问题；</p>
<ol>
<li>父组件和子组件的js方法的执行顺序是怎样的？</li>
</ol>
<p>通过测试可以知道，执行顺序如下；</p>
<p>父组件<code>created</code>—&gt;子组件<code>created</code>—&gt;子组件<code>mounted</code>—&gt;父组件<code>mounted</code></p>
<p>如果有多个子组件：</p>
<p>父组件created钩子结束后，依次执行子组件的created钩子<br>多个子组件的created执行顺序为父组件内子组件DOM顺序<br>多个子组件的mounted顺序无法保证，跟子组件本身复杂程度有关<br>父组件一定在所有子组件结束mounted钩子之后，才会进入mounted钩子  </p>
<blockquote>
<p>以上说法存疑</p>
</blockquote>
<ol start="2">
<li>什么时候才可以获取到dom元素的高度，或者说什么时候dom渲染完成了呢？</li>
</ol>
<p>这是一个涉及到生命周期的问题；那么再回去仔细看看关于生命周期的说明;在官方文档中有提到</p>
<blockquote>
<p><code>el</code>被新创建的 <code>vm.$el</code> 替换，并挂载到实例上去之后调用该钩子。如果 <code>root</code> 实例挂载了一个文档内元素，当 <code>mounted</code>被调用时 <code>vm.$el</code> 也在文档内。</p>
</blockquote>
<blockquote>
<p>注意 <code>mounted</code> 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 <code>vm.$nextTick</code> 替换掉 <code>mounted</code>：</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">mounted: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">this</span>.$nextTick(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// Code that will run only after the</span></span><br><span class="line">    <span class="comment">// entire view has been rendered</span></span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>这样就是相当于，改版前，在父组件的<code>mounted</code>阶段执行请求后得到数据传给子组件，这是一个异步过程，异步是放在最后执行的，然后图表初始化，获得了元素高度；</p>
<p>改版后，是在子元素<code>mounted</code>阶段执行初始化；此时tab中的标签页虽然已存在，但属于隐藏状态，是没有宽度的，此时获取宽度是获取不到的；</p>
<p>DOM的修改不会立马导致渲染，渲染线程是在一个独立的线程运行的，但是渲染线程和Javascript线程是互斥的，必须等待Javascript的这次调度执行完或线程挂起了，才能执行渲染；</p>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://iyue.top/2018/10/12/vue%E9%A1%B9%E7%9B%AE%E5%9C%A8%E5%9B%BD%E9%99%85%E5%8C%96%E4%B8%AD%E9%81%87%E5%88%B0%E7%9A%84%E9%97%AE%E9%A2%98/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="萌新">
      <meta itemprop="description" content="我是萌新">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="山外小楼">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2018/10/12/vue%E9%A1%B9%E7%9B%AE%E5%9C%A8%E5%9B%BD%E9%99%85%E5%8C%96%E4%B8%AD%E9%81%87%E5%88%B0%E7%9A%84%E9%97%AE%E9%A2%98/" class="post-title-link" itemprop="url">vue项目在国际化中遇到的问题</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2018-10-12 14:54:47" itemprop="dateCreated datePublished" datetime="2018-10-12T14:54:47+08:00">2018-10-12</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2021-04-27 16:41:57" itemprop="dateModified" datetime="2021-04-27T16:41:57+08:00">2021-04-27</time>
      </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>由于项目的对外，所以项目需要做国际化，vue项目的国际化自然要用到vue-i18n这个插件，现就国际化中遇到的情况及解决方案整理如下</p>
<h2 id="翻译文本在template中"><a href="#翻译文本在template中" class="headerlink" title="翻译文本在template中"></a>翻译文本在<code>template</code>中</h2><p>这里的文本会即时替换</p>
<h2 id="翻译文本在实例js中"><a href="#翻译文本在实例js中" class="headerlink" title="翻译文本在实例js中"></a>翻译文本在实例<code>js</code>中</h2><p>这里的文本由于在首次实例化后就不会再变化，所以需要手动触发一次变化</p>
<h2 id="翻译文本在实例之外的js中"><a href="#翻译文本在实例之外的js中" class="headerlink" title="翻译文本在实例之外的js中"></a>翻译文本在实例之外的js中</h2><p>mega    开发    鉴于原系统的维护性较差，项目插件引用众多，代码过多冗余，国际化繁琐，开发vue框架的新版mega（框架部分，首页部分内容，中英文国际化）<br>clever_db<br>开发<br>慢查询详情页面改版完成，新版不需要用户选择分时天粒度，</p>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://iyue.top/2018/10/11/vue%E4%BD%BF%E7%94%A8%E4%B8%AD%E9%97%AE%E9%A2%98/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="萌新">
      <meta itemprop="description" content="我是萌新">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="山外小楼">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2018/10/11/vue%E4%BD%BF%E7%94%A8%E4%B8%AD%E9%97%AE%E9%A2%98/" class="post-title-link" itemprop="url">vue使用中问题</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2018-10-11 15:45:52" itemprop="dateCreated datePublished" datetime="2018-10-11T15:45:52+08:00">2018-10-11</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2021-04-27 16:41:57" itemprop="dateModified" datetime="2021-04-27T16:41:57+08:00">2021-04-27</time>
      </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>记录vue在使用中遇到的需要注意的问题</p>
<h2 id="正文"><a href="#正文" class="headerlink" title="正文"></a>正文</h2><ol>
<li>vue-router中路由path值的问题</li>
</ol>
<p>在嵌套路由使用时，设置path值的时候，注意，如是顶层路由，可以写为<code>/home</code>,即可以加<code>/</code>；在设置二级路由的时候虽然也可以这么写，但就失去了路由层级，在<a target="_blank" rel="noopener" href="https://router.vuejs.org/zh/guide/essentials/nested-routes.html">官方文档</a>中有提示：  </p>
<blockquote>
<p>要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。  </p>
</blockquote>
<ol start="2">
<li>vue-router中路由name值的问题</li>
</ol>
<p>在编程导航的时候，我们可以使用path或者name，使用name的时候发现，name的值不可以重复，就算时平行路由各自的子路由也不能重复name，否则导航发生混乱；</p>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="http://iyue.top/2018/09/13/%E5%B8%B8%E8%A7%81HTTP%E7%8A%B6%E6%80%81%E7%A0%81%E8%A7%A3%E9%87%8A/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="萌新">
      <meta itemprop="description" content="我是萌新">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="山外小楼">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2018/09/13/%E5%B8%B8%E8%A7%81HTTP%E7%8A%B6%E6%80%81%E7%A0%81%E8%A7%A3%E9%87%8A/" class="post-title-link" itemprop="url">常见HTTP状态码解释</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2018-09-13 21:41:56" itemprop="dateCreated datePublished" datetime="2018-09-13T21:41:56+08:00">2018-09-13</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2021-04-27 16:41:57" itemprop="dateModified" datetime="2021-04-27T16:41:57+08:00">2021-04-27</time>
      </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h2 id="1xx-临时响应"><a href="#1xx-临时响应" class="headerlink" title="1xx(临时响应)"></a>1xx(临时响应)</h2><p>表示临时响应并需要请求者继续执行操作的状态代码。</p>
<p>http状态码 100 (继续) 请求者应当继续提出请求。 服务器返回此代码表示已收到请求的第一部分，正在等待其余部分。</p>
<p>http状态码 101 (切换协议) 请求者已要求服务器切换协议，服务器已确认并准备切换。</p>
<h2 id="2xx-成功"><a href="#2xx-成功" class="headerlink" title="2xx (成功)"></a>2xx (成功)</h2><p>表示成功处理了请求的状态代码。</p>
<p>http状态码 200 (成功) 服务器已成功处理了请求。 通常，这表示服务器提供了请求的网页。</p>
<p>http状态码 201 (已创建) 请求成功并且服务器创建了新的资源。</p>
<p>http状态码 202 (已接受) 服务器已接受请求，但尚未处理。</p>
<p>http状态码 203 (非授权信息) 服务器已成功处理了请求，但返回的信息可能来自另一来源。</p>
<p>http状态码 204 (无内容) 服务器成功处理了请求，但没有返回任何内容。</p>
<p>http状态码 205 (重置内容) 服务器成功处理了请求，但没有返回任何内容。</p>
<p>http状态码 206 (部分内容) 服务器成功处理了部分 GET 请求。</p>
<h2 id="3xx-重定向"><a href="#3xx-重定向" class="headerlink" title="3xx (重定向)"></a>3xx (重定向)</h2><p>表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向。</p>
<p>http状态码 300 (多种选择) 针对请求，服务器可执行多种操作。 服务器可根据请求者 (user agent) 选择一项操作，或提供操作列表供请求者选择。</p>
<p>http状态码 301 (永久移动) 请求的网页已永久移动到新位置。 服务器返回此响应(对 GET 或 HEAD 请求的响应)时，会自动将请求者转到新位置。</p>
<p>http状态码 302 (临时移动) 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。</p>
<p>http状态码 303 (查看其他位置) 请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。</p>
<p>http状态码 304 (未修改) 自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。</p>
<p>http状态码 305 (使用代理) 请求者只能使用代理访问请求的网页。 如果服务器返回此响应，还表示请求者应使用代理。</p>
<p>http状态码 307 (临时重定向) 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。</p>
<h2 id="4xx-请求错误"><a href="#4xx-请求错误" class="headerlink" title="4xx(请求错误)"></a>4xx(请求错误)</h2><p>这些状态代码表示请求可能出错，妨碍了服务器的处理。</p>
<p>http状态码 400 (错误请求) 服务器不理解请求的语法。</p>
<p>http状态码 401 (未授权) 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。</p>
<p>http状态码 403 (禁止) 服务器拒绝请求。</p>
<p>http状态码 404 (未找到) 服务器找不到请求的网页。</p>
<p>http状态码 405 (方法禁用) 禁用请求中指定的方法。</p>
<p>http状态码 406 (不接受) 无法使用请求的内容特性响应请求的网页。</p>
<p>http状态码 407 (需要代理授权) 此状态代码与 401(未授权)类似，但指定请求者应当授权使用代理。</p>
<p>http状态码 408 (请求超时) 服务器等候请求时发生超时。</p>
<p>http状态码 409 (冲突) 服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息。</p>
<p>http状态码 410 (已删除) 如果请求的资源已永久删除，服务器就会返回此响应。</p>
<p>http状态码 411 (需要有效长度) 服务器不接受不含有效内容长度标头字段的请求。</p>
<p>http状态码 412 (未满足前提条件) 服务器未满足请求者在请求中设置的其中一个前提条件。</p>
<p>http状态码 413 (请求实体过大) 服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。</p>
<p>http状态码 414 (请求的 URI 过长) 请求的 URI(通常为网址)过长，服务器无法处理。</p>
<p>http状态码 415 (不支持的媒体类型) 请求的格式不受请求页面的支持。</p>
<p>http状态码 416 (请求范围不符合要求) 如果页面无法提供请求的范围，则服务器会返回此状态代码。</p>
<p>http状态码 417 (未满足期望值) 服务器未满足”期望”请求标头字段的要求。</p>
<h2 id="5xx-服务器错误"><a href="#5xx-服务器错误" class="headerlink" title="5xx(服务器错误)"></a>5xx(服务器错误)</h2><p>这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错。</p>
<p>http状态码 500 (服务器内部错误) 服务器遇到错误，无法完成请求。</p>
<p>http状态码 501 (尚未实施) 服务器不具备完成请求的功能。 例如，服务器无法识别请求方法时可能会返回此代码。</p>
<p>http状态码 502 (错误网关) 服务器作为网关或代理，从上游服务器收到无效响应。</p>
<p>http状态码 503 (服务不可用) 服务器目前无法使用(由于超载或停机维护)。 通常，这只是暂时状态。</p>
<p>http状态码 504 (网关超时) 服务器作为网关或代理，但是没有及时从上游服务器收到请求。</p>
<p>http状态码 505 (HTTP 版本不受支持) 服务器不支持请求中所用的 HTTP 协议版本。</p>
<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>我们访问网站最常遇到的状态码，200代表请求成功，304是未修改(缓存)，403服务器拒绝(文件夹权限问题)，404请求失败，文件不存在(路径不存在)，500是服务器错误，通常代表服务器没法处理此请求或者服务器挂掉了，503是请求无响应，通常是服务器资源没法分配处理，网站被攻击的会经常遇到503错误的。了解这些状态码代表的含义，可以帮助你快速的定位网站遇到的故障问题。</p>

      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




  <nav class="pagination">
    <span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><a class="page-number" href="/page/3/">3</a><a class="extend next" rel="next" href="/page/2/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
  </nav>


<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      const activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      const commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>
</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


<div class="copyright">
  &copy; 
  <span itemprop="copyrightYear">2021</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">萌新</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/muse/" class="theme-link" rel="noopener" target="_blank">NexT.Muse</a> 强力驱动
  </div>

    </div>
  </footer>

  
  <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
<script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/schemes/muse.js"></script><script src="/js/next-boot.js"></script>

  






  





</body>
</html>
